<template>
  <div class="base-site-form">
    <BasicForm @register="registerbasicSettings" @submit="handleSubmit">
      <template #mini>
        <a-button type="link" @click="handleAccessMoneySettingModal('min_access')">
          {{ $t('table.system.min_deposit_setting') }}
        </a-button>
      </template>
      <template #base-three>
        <a-button type="link" @click="handleAccessMoney('bet_limit')">
          {{ $t('table.system.system_limit_settings') }}
        </a-button>
      </template>
      <template #withdraw-times>
        <a-button type="link" @click="handleWithdraw()">
          {{ t('table.system.system_install') }}
        </a-button>
      </template>
      <template #PreferentialConfiguration>
        <a-button type="link" @click="handleDiscountConfig()">
          {{ t('table.system.system_install') }}
        </a-button>
      </template>
      <template #commissionAmount="{ model, field }">
        <Input
          v-model:value="model[field]"
          size="large"
          :placeholder="$t('table.system.system_Please_enter_the_minimum_commission_to_receive')"
        >
          <template #addonAfter>
            <cdIconCurrency :icon="'USDT'" class="w-20px" />
          </template>
        </Input>
      </template>

      <template #currency-slot>
        <div class="flex flex-wrap">
          <div
            v-for="(item, index) in currencyTreeList"
            :key="index"
            class="m-y-1 w-75px flex justify-items-center"
          >
            <cdIconCurrency class="w-15px m-r-2" :icon="currentyOptions[item.id]" />
            <span>{{ currentyOptions[item.id] }}</span>
          </div>
        </div>
      </template>
    </BasicForm>

    <div class="submit-btn text-center">
      <a-button
        type="primary"
        size="large"
        @click="handleSubmit"
        :loading="btnLoading"
        class="mt-60px t-form-label-com"
        >{{ $t('common.saveText') }}</a-button
      >
    </div>

    <depositSettingModal @register="registerAccessMoneySettingModal" @send-params="sendParamsFun" />
    <AccessMoneySettingModalbet
      @register="registerAccessMoneySettingModalBet"
      @send-params="sendParamsFun"
      @reload-update="reloadUpdateFun"
    />
    <HandlingFeeModal @register="resgiterWithdraw" />
    <DiscountConfigModal @register="registerDiscountConfig" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import { CheckboxGroup, Checkbox, FormItemRest, Col, message, Input } from 'ant-design-vue';

  import { ref, onMounted, reactive, watch } from 'vue';
  import { schemas } from './base.data';
  import depositSettingModal from './modal/depositSettingModal.vue';
  import AccessMoneySettingModalbet from './modal/depositSettingModalBet.vue';
  import { useModal } from '/@/components/Modal';
  import { useFormSetting } from '/@/hooks/setting/useFormSetting';
  import { getSiteBrandDetail, updateSiteBrand } from '/@/api/sys';
  import cdIconCurrency from '/@/components-cd/Icon/currency/cd-icon-currency.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import HandlingFeeModal from './modal/HandlingFeeModal.vue';
  import { getWithdrawFee } from '/@/api/finance';
  import DiscountConfigModal from './modal/DiscountConfigModal.vue';
  import { useFinanceStore } from '/@/store/modules/finance';
  import { useTreeListStore } from '/@/store/modules/treeList';
  import { currentyOptions } from '/@/settings/commonSetting';

  const { currencyTreeList } = useTreeListStore();
  const { t } = useI18n();
  const emit = defineEmits(['update:ok']);
  const getInfoLimit = ref({} as any);
  const brandDetail = ref({} as any);
  const btnLoading = ref(false as any);
  const financeStore = useFinanceStore();

  const props = defineProps({
    detailInfo: {
      type: Object,
      default: () => ({}),
    },
    id: {
      type: String,
      default: '1',
    },
  });
  //存取款设置
  const depositWithdrawData = ref({});

  const [registerDiscountConfig, { openModal: openDiscountConfig }] = useModal();

  async function handleDiscountConfig() {
    await financeStore.InitpaymentMethods();
    await openDiscountConfig(true, {});
  }

  const FORM_SIZE = useFormSetting().getFormSize;
  const getLimit = ref({} as any);
  const [registerAccessMoneySettingModal, { openModal: openAccessMoneySettingModal }] = useModal();

  const [registerAccessMoneySettingModalBet, { openModal: openAccessMoneySettingModalBet }] =
    useModal();
  const [resgiterWithdraw, { openModal: openWithdraw }] = useModal();
  function handleAccessMoneySettingModal(type): void {
    openAccessMoneySettingModalBet(true, {
      //record: depositWithdrawData.value[type],
      type,
    });
  }
  async function handleAccessMoney(type) {
    openAccessMoneySettingModalBet(true, { type: type });
  }
  function setValue(verify) {
    if (!verify.all && verify.otp && !verify.password) {
      return 1;
    } else if (!verify.all && !verify.otp && verify.password) {
      return 2;
    } else if (verify.all && !verify.otp && !verify.password) {
      return 3;
    } else {
      return null; // 可以根据需要返回其他值或执行其他操作
    }
  }
  // 存取款设置
  // const getSitedepositwithdraw = async (list) => {
  //   setFieldsValueBasicSettings({
  //     depositwithdraw: list.values,
  //   });
  // };

  const [
    registerbasicSettings,
    { setFieldsValue: setFieldsValueBasicSettings, validate, getFieldsValue },
  ] = useForm({
    schemas: schemas,
    // actionColOptions: {
    //   span:14,
    // },
    size: FORM_SIZE,
    labelWidth: '260px',
    labelAlign: 'right',
    showResetButton: false,
    showSubmitButton: false,
    showActionButtonGroup: false,
    // submitButtonOptions: {
    //   text: t('common.saveText'),
    //   size: FORM_SIZE,
    //   class: "base-site-form-submit",
    // },
  });
  function getValue(verify) {
    if (verify.all) {
      return 3;
    } else if (verify.otp) {
      return 1;
    } else if (verify.password) {
      return 2;
    } else {
      return null; // 可以根据需要返回其他值或执行其他操作
    }
  }
  const setFormList = async (baseInfo) => {
    if (!baseInfo) return;
    await setFieldsValueBasicSettings({ ...baseInfo, verify: getValue(baseInfo.verify) });
  };
  const langList = ['en_US', 'pt_BR', 'th_TH', 'vi_VN', 'zh_CN', 'hi_IN'];
  const handleSubmit = async () => {
    const values = await validate();
    values.lang = {
      f: values.chooseLanguage,
      d: values.chooseLanguage == 2 ? langList : values.lang,
    };
    delete values.chooseLanguage;
    btnLoading.value = true;
    let verify = {};
    if (values.verify === 1) {
      verify = {
        all: false,
        otp: true,
        password: false,
      };
    } else if (values.verify === 2) {
      verify = {
        all: false,
        otp: false,
        password: true,
      };
    } else {
      verify = {
        all: true,
        otp: false,
        password: false,
      };
    }
    const params = {
      name: 'base',
      content: JSON.stringify({ ...values, verify: verify }),
      // min_access: JSON.stringify(restructuredData),
      // bet_limit: JSON.stringify(brandDetail.value.bet_limit),
    };
    const { status, data } = await updateSiteBrand(params);
    if (status) {
      message.success(data);
      btnLoading.value = false;
      GetSiteBrandDetail({ tag: 'base' });
      // emit('update:ok');
    } else {
      message.error(data);
    }
  };

  async function handleWithdraw() {
    const res = await getWithdrawFee();
    openWithdraw(true, res);
  }

  const GetSiteBrandDetail = async (param) => {
    const data = await getSiteBrandDetail(param);
    brandDetail.value = data;
    await setFieldsValueBasicSettings({
      chooseLanguage: data?.lang?.f,
    });
    if (data?.lang?.f == 1) {
      setFieldsValueBasicSettings({
        lang: data.lang.d,
      });
    }
    if (data?.lang?.f == 2) {
      setFieldsValueBasicSettings({
        lang: 'zh_CN',
      });
    }

    delete data.lang;
    setFormList(data);
  };

  function sendParamsFun(params, type) {
    if (type == 'bet_limit') brandDetail.value['bet_limit'] = params;
    else brandDetail.value['min_access'] = params;
    handleSubmit();
  }
  function reloadUpdateFun() {
    GetSiteBrandDetail({ tag: 'base' });
  }

  onMounted(() => {
    financeStore.InitpaymentMethods();
    GetSiteBrandDetail({ tag: 'base' });
  });
</script>
<style lang="less" scoped>
  .high-form {
    padding-bottom: 48px;
  }

  .base-site-form {
    padding: 30px 20px;
    border: 1px solid #e1e1e1;
    background-color: #fff;
  }

  //::v-deep(.ant-form-item) {
  //  .base-site-form-submit {
  //    //position: absolute;
  //    //border: 1px solid red!important;
  //    min-width:240px;
  //  }
  //}
  ::v-deep(.ant-form-item-label > label),
  ::v-deep(.ant-btn-link) {
    font-weight: 500 !important;
  }

  ::v-deep(.ant-form-item-required) {
    .vben-basic-help {
      margin: 0 !important;
    }

    .app-iconify {
      svg {
        display: none;
      }
    }

    .app-iconify::after {
      content: ' ';
      display: inline-block;
      position: absolute;
      left: -15px;
      width: 10px;
      height: 10px;
      margin-top: -12px;
      background-image: url('/@/assets/images/help.form.title.tooltip.webp');
      background-size: 100%;
    }

    ::v-deep(.ant-tooltip) {
      border: 1px solid red !important;
    }
  }

  .submit-btn {
    width: 100%;
    margin: auto;
    float: left;

    button {
      min-width: 240px;
    }
  }

  :deep(.ant-btn) {
    padding: 4px 0;
  }

  :deep(.ant-form-item-control) {
    padding-left: 5px;
  }

  ::v-deep(.fast-sty) {
    .ant-radio-group {
      white-space: nowrap !important;
    }
  }
</style>
